<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Markdown 解析器 - 学术助手</title>
  
  <!-- 外部CSS库 -->
  <script src="css/tailwindcss.js"></script>
  <link href="css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义CSS -->
  <link rel="stylesheet" href="css/style.css">
  
  <!-- Tailwind 配置 -->
  <script src="js/tailwind-config.js"></script>
  
  <!-- 共用导航栏组件 -->
  <script src="js/navbar.js"></script>
  
  <!-- Markdown 解析库 -->
  <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
  
  <style>
    /* 预览区样式 */
    #output-preview {
      line-height: 1.8;
      color: #374151;
    }
    
    #output-preview h1,
    #output-preview h2,
    #output-preview h3,
    #output-preview h4,
    #output-preview h5,
    #output-preview h6 {
      font-weight: normal;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      color: #111827;
      border: none;
      outline: none;
      background: transparent;
      padding: 0;
    }
    
    #output-preview h1 {
      font-size: 1.8em;
      font-weight: normal;
    }
    
    #output-preview h2 {
      font-size: 1.5em;
      font-weight: normal;
    }
    
    #output-preview h3 {
      font-size: 1.3em;
      font-weight: normal;
    }
    
    #output-preview h4 {
      font-size: 1.1em;
      font-weight: normal;
    }
    
    #output-preview h5,
    #output-preview h6 {
      font-weight: normal;
    }
    
    #output-preview p,
    #output-preview div,
    #output-preview ul,
    #output-preview ol,
    #output-preview li {
      border: none;
      outline: none;
      background: transparent;
      padding: 0;
    }
    
    #output-preview hr {
      display: none;
    }
    
    #output-preview blockquote {
      border: none;
      outline: none;
      background: transparent;
      padding: 0;
      margin: 1em 0;
    }
    
    #output-preview code {
      background-color: #f3f4f6;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: "Courier New", monospace;
      font-size: 0.9em;
    }
    
    #output-preview pre {
      background-color: #f5f5f5;
      border: 1px solid #e5e7eb;
      padding: 12px;
      border-radius: 6px;
      overflow-x: auto;
    }
    
    #output-preview pre code {
      background-color: transparent;
      padding: 0;
    }
    
    /* 表格样式 */
    #output-preview table {
      border-collapse: collapse;
      width: 100%;
      margin: 1em 0;
      overflow-x: auto;
      display: block;
    }
    
    #output-preview table th,
    #output-preview table td {
      border: 1px solid #000000;
      padding: 8px 10px;
      background: #ffffff;
      font-weight: normal;
      text-align: left;
      vertical-align: top;
    }
    
    #output-preview table th {
      font-weight: bold;
      text-align: center;
    }
    
    #output-preview table thead tr {
      background-color: #ffffff;
    }
    
    #output-preview table tbody tr:nth-child(even) {
      background-color: #ffffff;
    }
    
    /* 复制按钮状态 */
    #copy-output.copied {
      background: #10b981 !important;
      background-image: none !important;
      color: #ffffff !important;
    }
  </style>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 font-inter min-h-screen flex flex-col">
  
  <!-- 导航栏将通过 navbar.js 动态加载 -->

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    
    <!-- 页面标题 -->
    <div class="text-center mb-8" style="animation: fadeInUp 0.6s ease-out both;">
      <h2 class="text-4xl font-bold text-dark mb-3">
        Markdown<span class="text-primary">解析器</span>
      </h2>
      <p class="text-gray-600 text-lg">
        将 Markdown 转为普通文本，表格保留为表格格式，方便论文创作
      </p>
    </div>

    <!-- 使用说明 -->
    <div class="max-w-6xl mx-auto mb-6" style="animation: fadeInUp 0.6s ease-out 0.1s both;">
      <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
        <div class="flex items-start">
          <i class="fa fa-info-circle text-blue-500 text-xl mr-3 mt-1"></i>
          <div>
            <h3 class="font-semibold text-blue-900 mb-1">使用说明</h3>
            <p class="text-blue-800 text-sm leading-relaxed">
              1. 在左侧输入框粘贴 Markdown 格式内容（支持标题、列表、粗体、代码等所有 Markdown 语法）
              2. 右侧实时显示解析结果：普通文本去除 Markdown 标记，表格自动转换为标准表格格式
              3. 点击"一键复制"按钮复制解析结果（表格保留表格格式），或点击"导出Word"导出为 Word 文档
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 主工作区 -->
    <div class="max-w-6xl mx-auto" style="animation: fadeInUp 0.6s ease-out 0.2s both;">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        
        <!-- 左侧：Markdown 输入区 -->
        <div class="bg-white rounded-2xl shadow-soft p-6">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-bold text-gray-800 flex items-center">
              <i class="fa fa-pencil-square-o text-blue-600 mr-2"></i>
              Markdown 输入
            </h3>
            <button 
              id="clear-input" 
              class="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-all"
            >
              <i class="fa fa-trash-o mr-1"></i>清空
            </button>
          </div>
          
          <textarea 
            id="input-markdown" 
            class="w-full h-[500px] p-4 border-2 border-gray-200 rounded-xl focus:border-primary focus:outline-none resize-none font-mono text-sm leading-relaxed"
            placeholder="在此粘贴 Markdown 内容...&#10;&#10;例如：&#10;# 论文标题&#10;&#10;## 1. 研究背景&#10;&#10;本研究旨在探索**重要问题**。&#10;&#10;### 1.1 技术路线&#10;&#10;- 方法一：详细说明&#10;- 方法二：详细说明&#10;&#10;| 参数 | 数值 | 单位 |&#10;|------|------|------|&#10;| 温度 | 25   | ℃   |&#10;| 压力 | 101.3| kPa  |"
          ></textarea>
          
          <div class="mt-4 flex items-center justify-between text-sm text-gray-500">
            <span>字符数: <span id="input-count" class="font-semibold text-gray-700">0</span></span>
            <span>行数: <span id="input-lines" class="font-semibold text-gray-700">0</span></span>
          </div>
        </div>

        <!-- 右侧：解析结果预览区 -->
        <div class="bg-white rounded-2xl shadow-soft p-6">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-bold text-gray-800 flex items-center">
              <i class="fa fa-check-circle text-green-600 mr-2"></i>
              解析结果
            </h3>
            <div class="flex space-x-2">
              <button 
                id="copy-output" 
                class="px-4 py-2 text-sm bg-gradient-to-r from-green-500 to-emerald-600 hover:shadow-lg text-white rounded-lg transition-all font-medium"
              >
                <i class="fa fa-copy mr-1"></i>一键复制
              </button>
              <button 
                id="export-word" 
                class="px-4 py-2 text-sm bg-gradient-to-r from-blue-500 to-indigo-600 hover:shadow-lg text-white rounded-lg transition-all font-medium"
              >
                <i class="fa fa-file-word-o mr-1"></i>导出Word
              </button>
            </div>
          </div>
          
          <div 
            id="output-preview" 
            class="w-full h-[500px] p-4 bg-gray-50 border-2 border-gray-200 rounded-xl overflow-y-auto text-sm leading-relaxed"
          >
            <div class="text-gray-400 h-full flex flex-col items-center justify-center">
              <i class="fa fa-arrow-left text-4xl mb-3"></i>
              <p>在左侧输入 Markdown 内容后</p>
              <p>这里会自动显示解析结果</p>
            </div>
          </div>
          
          <div class="mt-4 flex items-center justify-between text-sm">
            <span class="text-gray-500">解析完成</span>
          </div>
        </div>

      </div>
    </div>

    <!-- 功能特性 -->
    <div class="max-w-6xl mx-auto mt-12 grid grid-cols-1 md:grid-cols-3 gap-6" style="animation: fadeInUp 0.6s ease-out 0.3s both;">
      <div class="bg-white rounded-xl p-6 shadow-soft text-center">
        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-code text-blue-600 text-2xl"></i>
        </div>
        <h4 class="font-bold text-gray-800 mb-2">智能解析</h4>
        <p class="text-gray-600 text-sm">自动识别所有 Markdown 语法，去除标记转为纯文本，表格保留为表格格式</p>
      </div>
      
      <div class="bg-white rounded-xl p-6 shadow-soft text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-table text-green-600 text-2xl"></i>
        </div>
        <h4 class="font-bold text-gray-800 mb-2">表格保留</h4>
        <p class="text-gray-600 text-sm">表格自动转换为标准格式，复制到 Word 后可正常编辑，完美适配论文写作</p>
      </div>
      
      <div class="bg-white rounded-xl p-6 shadow-soft text-center">
        <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-shield text-purple-600 text-2xl"></i>
        </div>
        <h4 class="font-bold text-gray-800 mb-2">隐私安全</h4>
        <p class="text-gray-600 text-sm">纯前端处理，数据不上传服务器，保护论文内容隐私</p>
      </div>
    </div>

  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200 py-8 mt-12">
    <div class="container mx-auto px-4 text-center text-gray-600">
      <p class="mb-2">© 2024 学术助手 - 专注于学术资源与工具导航</p>
      <p class="text-sm">
        <a href="index.html" class="hover:text-primary transition-colors">返回首页</a>
        <span class="mx-2">|</span>
        <a href="tools.html" class="hover:text-primary transition-colors">论文工具</a>
        <span class="mx-2">|</span>
        <a href="#" class="hover:text-primary transition-colors">意见反馈</a>
      </p>
    </div>
  </footer>

  <!-- JavaScript -->
  <script src="js/markdown-parser.js"></script>
</body>
</html>

